<template>
  <div class='page-content'>

    <!-- 工具栏区域 -->
    <table-bar :showTop="false"
               :columns="columns"
               @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">

      </div>
      <!-- 左侧按钮 -->
      <div slot="bottom_">
        <el-button type="primary"
                   plain>新增批次</el-button>
        <el-button type="danger"
                   plain>批量删除</el-button>
        <el-button type="success"
                   plain>导入</el-button>
        <el-button type="success"
                   plain>导出</el-button>
      </div>

    </table-bar>

    <!-- 表格区域 -->
    <the-table :data="rootList"
               :showPage="false"
               @getDataBySelectBox="handleSelectionChange"
               ref="table">
      <el-table-column type="selection"
                       width="55"></el-table-column>

      <el-table-column label="序号"
                       type="index"
                       v-if="columns[0].show" />
      <el-table-column label="产品名"
                       prop="processName"
                       v-if="columns[1].show" />
      <el-table-column label="加工批次"
                       prop="id"
                       v-if="columns[2].show" />
      <el-table-column label="屠宰批次"
                       prop="shBatch"
                       v-if="columns[3].show" />
      <el-table-column label="养殖批次"
                       prop="farmingBatch"
                       v-if="columns[4].show" />
      <el-table-column label="创建时间"
                       prop="gmtCreate"
                       v-if="columns[5].show" />
      <el-table-column label="修改时间"
                       prop="gmtModified"
                       v-if="columns[6].show" />
      <el-table-column label="操作"
                       fixed="right"
                       width="200px"
                       v-if="columns[7].show">
        <template slot-scope="scope">
          <el-button type="text"
                     icon="el-icon-coin"
                     @click="showQRCode(scope.row)">
            溯源码生成
          </el-button>
        </template>
      </el-table-column>
    </the-table>

    <!-- 分页器区域 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   :page-sizes="[5, 8, 10, 15]"
                   :page-size="pageSize"
                   :current-page="pageNum"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   class="page">
    </el-pagination>

    <el-dialog title="溯源码"
               :visible.sync="qrCodeDialog"
               width="35%">
      <div class="qrcode-container">
        <vue-qr :text="codeUrl"
                :size="300"></vue-qr>
        <div>
          <el-link type="primary"
                   :href="codeUrl"
                   icon="el-icon-view">
            {{codeUrl}}
          </el-link>
        </div>
      </div>

      <span slot="footer">
        <el-button @click="qrCodeDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="qrCodeDialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <Process-choice />

  </div>
</template>

<script>
import { changeColumn, pagination, dialogClose, multipleSelection, queryForm } from '@/api/mixin/'
import ProcessChoice from '@/components/Process/ProcessChocie.vue'
import { dateShorter } from '@/utils/utils'

import VueQr from 'vue-qr'

export default {
  name: "RootsMange",
  meta: {
    title: "溯源管理",
  },
  mixins: [changeColumn, pagination, dialogClose, multipleSelection, queryForm],
  components: {
    ProcessChoice,
    VueQr
  },
  data () {
    return {
      columns: [
        { name: "序号", show: true },
        { name: "产品名", show: true },
        { name: "加工批次", show: true },
        { name: "屠宰批次", show: true },
        { name: "养殖批次", show: true },
        { name: "创建时间", show: true },
        { name: "修改时间", show: true },
        { name: "操作", show: true },
      ],
      rootList: [],
      qrCodeDialog: false,
      codeUrl: '',
      baseUrl: window.location.href
    }
  },
  computed: {
    select_processingId () {
      return this.$store.state.Usersetting.ProcessInfo.processingId
    }
  },
  methods: {
    //唤起选择加工厂面板
    getProcess () {
      this.$store.commit('isShowProcessChoice', 'Process')
    },
    async getRootList () {
      const { data: res } = await this.$http.get(`/processing/processing-batch/page/${this.pageNum}/${this.pageSize}`, { params: { processingId: this.select_processingId } })
      if (res.statusCode !== 20000) return;
      // if (res.statusCode !== 20000) return this.$message.error('获取溯源信息失败')

      dateShorter(res.data.records, 'gmtCreate')
      dateShorter(res.data.records, 'gmtModified')
      this.rootList = res.data.records
      this.total = res.data.total
    },
    showQRCode ({ id }) {
      // this.codeUrl = this.baseUrl + '1454062595158585346'
      this.codeUrl = `${this.baseUrl}/${id}`
      this.qrCodeDialog = true
    }
  },
  created () {
    if (!this.select_processingId) {
      this.getProcess()
    }
    this.getRootList()
  }
}
</script>

<style lang="scss" scoped>
.page {
  margin-top: 6px;
  text-align: center;
}
.qrcode-container {
  text-align: center;
}
.el-dialog__body {
  padding: 0 20px 20px;
}
</style>